<template>
  <div class="network-dialog">
    <el-dialog :title="isAdd ? '新增网段' : '编辑网段'" :visible.sync="showDialog" width="35%" :before-close="handleClose"
      @update:showDialog="toggleDialog">
      <el-form label-width="100px" ref="form" :model="form" :rules="rules">
        <el-form-item label="业务类型：" prop="businessType">
          <el-select v-model="form.businessType" placeholder="请选择业务类型">
            <el-option v-for="dict in dict.type.business_type" :key="dict.value" :label="dict.label"
              :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="办公地区：" prop="address">
          <el-select v-model="form.address" placeholder="请选择办公地区">
            <el-option v-for="dict in dict.type.office_area" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="IP段地址：" prop="ipAddress">
          <el-input v-model="form.ipAddress"></el-input>
        </el-form-item>
        <el-form-item label="单位：">
          <el-input v-model="form.unit"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('form')">确定</el-button>
          <el-button @click="handleClose">关闭</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  addIPAddress,
  updateIPAddress,
} from "@/api/businessSupport/businessManagement.js";
export default {
  dicts: ["business_type", "office_area"],
  data() {
    return {
      form: {},
      rules: {
        businessType: [
          { required: true, message: "请选择业务类型", trigger: "change" },
        ],
        address: [
          { required: true, message: "请选择办公地点", trigger: "change" },
        ],
        ipAddress: [
          { required: true, message: "请输入ip地址", trigger: "blur" },
        ],
      },
    };
  },
  components: {},
  props: {
    //弹窗显、隐
    showDialog: {
      type: Boolean,
      default: false,
    },
    detail: {
      type: Object,
      default: () => {
        return {};
      },
    },
    isAdd: {
      type: Boolean,
      default: true,
    },
  },
  filters: {},
  methods: {
    // 弹窗关闭
    handleClose() {
      this.toggleDialog();
    },
    toggleDialog(visible = false) {
      this.$emit("update:showDialog", visible);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.operateIpAddress();
        } else {
          return false;
        }
      });
    },
    async operateIpAddress() {
      let methods = this.isAdd ? addIPAddress : updateIPAddress;
      const result = await methods({ ...{ id: 0 }, ...this.form });
      this.$message({
        type: "success",
        message: result.msg,
      });
      this.$emit("updateList")
      this.handleClose();
    },
  },
  mounted() {
    if (!this.isAdd) {
      this.form = { ...this.detail };
    }
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-input {
  width: 300px;
}
</style>
